<template>
    <div>
        <div class="upload-box">
            <div class="top-title">上传</div>
            <ul>
                <li class="flex">
                    <div class="first flex">
                        <!-- 文件logo  -->
                        <img src="../../assets/img/upload/files.png" alt="" class="imgIcon">
                        <!-- <img src="../../assets/img/upload/file.png" alt="" class="imgIconfile"> -->

                        <div class="file-name">战靴</div>
                        <div class="file-size">15.4M</div>
                    </div>

                    <!-- 上传失败 -->
                    <div class="fail flex">
                        <img src="../../assets/img/upload/redx.png" alt="">
                        <div>失败</div>
                    </div>
                    <!-- 正在上传 -->
                    <div class="upload-progress">
                        <Progress :width='pwidth' :fbackground='fbackground' :fheight='fheight' :fwidth='fwidth' :background='background' :speed='speedSize' :stop='stop' v-on:getspeedSize="getspeedSize" />
                    </div>
                    <!-- 关闭和刷新 -->
                    <div class="button-img">
                        <img src="../../assets/img/upload/refresh.png" alt="" class="refreshIcon" @click="refreshFn">
                        <img src="../../assets/img/upload/x.png" alt="" class="closeIcon" @click="closeFn">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import Progress from "../common/progress";
export default {
  components: {
    Progress
  },
  data() {
    return {
      fwidth: 80,
      fheight: 3,
      pwidth: 100,
      fbackground: "#DDDDDD",
      background: "#367CFC",
      speedSize: 300,
      stop:true
    };
  },
  watch:{},
  mounted() {},
  methods: {
    getspeedSize(data){
        if(data == 90){
            // 判断文件是否上传完毕 如果没有，this.stop = false
            this.stop = false
        }
    },
    refreshFn(){},
    closeFn(){
        this.$emit('close');
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/upload/uploadbox.less);
</style>

